{% extends "base.html" %} {% block content %}
<link type="text/css"
	href="/static/jquery/css/trontastic/jquery-ui-1.8.20.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="/static/jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="/static/jquery/js/jquery-ui-1.8.20.custom.min.js"></script>

<script>
	$(function() {
		$("#datepicker").datepicker({
			showWeek : true,
			minDate : 0,
			maxDate : +3,
			dateFormat : "yy-mm-dd"
		});
	});
</script>

<script>
	$(function() {
		var availableOptions = [ 
				{% for entry in airport_dict %}                
				"{{entry['AirportCode']}} - {{entry['Name']}}, {{entry['City']}}, {{entry['CountryCode']}}",
				{% endfor %}
				];
		$("#airports").autocomplete({
			source : availableOptions
		});
	});
</script>


<h2>Travel</h2>

<form method="post">
	<label>
		<div>Airport</div>
		<div class="ui-widget">
			<input type="text" id="airports" name="departure_airport_name">
		</div>
	</label> <label>
		<div>Departure</div> <input type="text" id="datepicker"
		name="departure_date">
	</label>

	<div class="error">{{error}}</div>

	<input type="submit">
</form>

{% endblock %}
